<template>
  <div class="method">
    <div class="method-header">
      <CustomTitle title="付款计划模版配置" />
      <a-button type="primary" @click="handleAdd">
        <template #icon>
          <icon-plus />
        </template>
        <template #default>添加模版</template>
      </a-button>
    </div>
    <div class="method-container">
      <methodList :data="methodData" @handleEdit="handleEdit" @changeList="getContractList"/>
      <a-empty class="empty" v-if="methodData.length === 0" />
    </div>
    <!--  添加模板   -->
    <EditMethodDrawer ref="methodDrawer" @changeList="getContractList"/>
  </div>
</template>

<script setup>
import { ref } from "vue";
import CustomTitle from "@/components/CustomTitle/index.vue";
import methodList from "./components/methodList/index.vue";
import EditMethodDrawer from "./components/editMethodDrawer/index.vue";
import { contractList } from "@/apis/contracting";

const methodDrawer = ref();
const methodData = ref([]);
// 添加模板
const handleAdd = () => {
  methodDrawer.value.add();
};
// 编辑模板
const handleEdit = item => {
  methodDrawer.value.edit(item);
};
const getContractList = async () => {
  const { data } = await contractList();
  methodData.value = data;
};
getContractList();
</script>

<style scoped lang="scss">
@import "index";
</style>
